<template>
	<view>
		<!-- 地址 -->
		<navigator url="/pages/address/list?change=Y" class="address-section">
			<view class="order-content">
                <uv-icon size="22" name="map"></uv-icon>
				<view class="cen">
					<view class="top">
						<text class="name">{{addressData.realName}}</text>
						<text class="mobile">{{addressData.mobile}}</text>
					</view>
					<text class="address">{{addressData.provincename}} {{addressData.cityname}} {{addressData.countyname}} {{addressData.address}}</text>
				</view>
                <uv-icon size="17" name="arrow-right"></uv-icon>
			</view>
			<image class="a-bg" src=""></image>
		</navigator>

		<view class="goods-section">
			<view class="g-item" v-for="(sku,index) in confrimData" :key="index">
				<image :src="uniConfig.ssoPath + sku.logo"></image>
				<view class="right">
					<text class="title clamp">{{ sku.productName }}</text>
                    <view class="spec">{{ sku.skuName }}</view>
                    <view class="price-box">
                        <text class="price">￥{{ sku.sellPrice }}</text>
                        <text class="number">x {{ sku.qty }}</text>
                    </view>
				</view>
			</view>
		</view>
		
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>总价</text>
				<text class="price-tip">￥</text>
				<text class="price">{{ totalPrice }}</text>
			</view>
			<text class="submit bg-line-color" @click="submit">确认购买</text>
		</view>
		
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getAddressList , sureSkuCartItem , createSkuCartOrder} from '@/api/product'
import { onLoad , onShow} from "@dcloudio/uni-app"
import { uniConfig } from '@/config/index'
const addressData = ref<any>({})
const cartItemIds = ref<any>('')
const confrimData = ref<any>([])
onLoad((options : any) => {
    cartItemIds.value = options.cartItemIds
})
const totalPrice = ref<any>(0)
onShow(() => {
    getAddressList({page_no:1,per:100}).then(res => {
        if(res.success){
            res.data.records.forEach(item => {
                if(item.defaultAddress == 'Y'){
                    addressData.value = item
                }
            })
            sureSkuCartItem({cartItemIds:cartItemIds.value}).then(sres => {
                if(sres.data.address)addressData.value = sres.data.address
                confrimData.value = sres.data.cartItemList
                let num = 0;
                for (let i of confrimData.value) {
                    num += i.qty * i.sellPrice * 1;
                }
                totalPrice.value = numFilter(num)
            })
        }
    })
})
const numFilter = (value : any) => {
	// 截取当前数据到小数点后两位
	let realVal = parseFloat(value).toFixed(2)
	return realVal
}

const submit = () => {
    const cartItem = []
    confrimData.value.forEach(item => {
        cartItem.push({
            birthdayTxt:'',
            cartItemId:item.cartItemId,
            deliveryDate:'',
            deliveryHour:'',
            memberRemark:''
        })
    })
    const member = uni.getStorageSync('memberInfo');
    createSkuCartOrder({
        'auth_code':member.auth_code,
        addressId:addressData.value.id,
        cartItemInfoList:cartItem
    }).then(res => {
        if(res.success){
            uni.redirectTo({
                url:`/pages/mall/orderConfirm?tradeno=${res.data}`
            })
        }else{
            uni.showToast({icon:'none',title:res.msg})
        }
    })
}

</script>

<style lang="scss">
page {
    background: $page-color-base;
    padding-bottom: 100upx;
}

.address-section {
    padding: 30upx 0;
    background: #fff;
    position: relative;

    .order-content {
        display: flex;
        align-items: center;
        padding:32upx;
    }

    .cen {
        display: flex;
        flex-direction: column;
        flex: 1;
        font-size: 28upx;
        color: $font-color-dark;
        padding-left:12upx;
    }

    .name {
        font-size: 34upx;
        margin-right: 24upx;
    }

    .address {
        margin-top: 6upx;
        margin-right: 20upx;
        color: $font-color-light;
    }

    .a-bg {
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        width: 100%;
        height: 5upx;
    }
}

.goods-section {
    margin-top: 16upx;
    background: #fff;
    padding-bottom: 1px;

    .g-header {
        display: flex;
        align-items: center;
        height: 84upx;
        padding: 0 30upx;
        position: relative;
    }

    .logo {
        display: block;
        width: 50upx;
        height: 50upx;
        border-radius: 100px;
    }

    .name {
        font-size: 30upx;
        color: $font-color-base;
        margin-left: 24upx;
    }

    .g-item {
        display: flex;
        margin: 22upx 32upx;
        padding: 32upx 0;
        image {
            flex-shrink: 0;
            display: block;
            width: 140upx;
            height: 140upx;
            border-radius: 4upx;
        }

        .right {
            flex: 1;
            padding-left: 24upx;
            overflow: hidden;
        }

        .title {
            font-size: 32upx;
            color: $font-color-dark;
            font-weight: 600;
        }

        .spec {
            font-size: 26upx;
            color: $font-color-light;
        }

        .price-box {
            display: flex;
            align-items: center;
            font-size: 32upx;
            color: $base-color;
            padding-top: 10upx;

            .price {
                margin-bottom: 4upx;
            }
            .number{
                font-size: 26upx;
                color: $font-color-base;
                margin-left: 20upx;
            }
        }

        .step-box {
            position: relative;
        }
    }
}
.yt-list {
    background: #fff;
    margin:22upx;
    border-radius: 9px;
    font-size: $font-base;
}

.yt-list-cell {
    display: flex;
    align-items: center;
    padding: 10upx 30upx 10upx 40upx;
    line-height: 70upx;
    position: relative;

    &.cell-hover {
        background: #fafafa;
    }

    &.b-b:after {
        left: 30upx;
    }

    .cell-icon {
        text-align: center;
        border-radius: 4upx;
        margin-right: 12upx;
    }

    .cell-more {
        align-self: center;
        font-size: 24upx;
        color: $font-color-light;
        margin-left: 8upx;
        margin-right: -10upx;
    }

    .cell-tit {
        flex: 1;
        color: $font-color-dark;
        margin-right: 10upx;
        font-weight: 600;
    }

    .cell-tip {
        font-size: 26upx;
        color: $font-color-dark;

        &.disabled {
            color: $font-color-light;
        }

        &.active {
            color: $base-color;
        }
        &.red{
            color: $base-color;
        }
    }

    &.desc-cell {
        .cell-tit {
            max-width: 90upx;
        }
    }

    .desc {
        flex: 1;
        font-size: $font-base;
        color: $font-color-dark;
    }
}

.footer{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 995;
    display: flex;
    align-items: center;
    width: 100%;
    height: 90upx;
    justify-content: space-between;
    font-size: 30upx;
    background-color: #fff;
    z-index: 998;
    color: $font-color-base;
    box-shadow: 0 -1px 5px rgba(0,0,0,.1);
    .price-content{
        padding-left: 30upx;
    }
    .price-tip{
        color: $base-color;
        margin-left: 8upx;
    }
    .price{
        font-size: 36upx;
        color: $base-color;
    }
    .submit{
        display:flex;
        align-items:center;
        justify-content: center;
        width: 280upx;
        height: 100%;
        color: #fff;
        font-size: 32upx;
        background-color: $base-color;
    }
}

/* 优惠券面板 */
.mask{
    display: flex;
    align-items: flex-end;
    position: fixed;
    left: 0;
    top: var(--window-top);
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0);
    z-index: 9995;
    transition: .3s;
    
    .mask-content{
        width: 100%;
        min-height: 30vh;
        max-height: 70vh;
        background: #f3f3f3;
        transform: translateY(100%);
        transition: .3s;
        overflow-y:scroll;
    }
    &.none{
        display: none;
    }
    &.show{
        background: rgba(0,0,0,.4);
        
        .mask-content{
            transform: translateY(0);
        }
    }
}

</style>
